<template>
  <div style="width: 100%; height: 100%">
    <fc-designer ref="designer" height="800px">
      <template slot="handle">
        <el-button type="primary" size="mini" @click="getRule"
          >保存表单</el-button
        >
      </template>
    </fc-designer>
  </div>
</template>

<script>
import { saveSurvery, surveryInfo, confirmRelease } from "@/api/survery/form";
import TestUpload from "../ruel/testUpload";
import checkbox from "../ruel/checkbox";
import select from "../ruel/select";
import input from "../ruel/input";
import radio from "../ruel/radio";
import upload from "../ruel/upload";
import cascader from "../ruel/cascader";
const filename2 = new Date().getTime();
import { Loading, Message } from "element-ui";
export default {
  name: "index",
  data() {
    return {
      data: {
        id: undefined,
        surveyName: undefined,
        rule: undefined,
        option: undefined,
        isSound: undefined,
        isRelease: undefined,
      },
    };
  },
  mounted() {
    //插入组件规则
    this.$refs.designer.addComponent(upload);
    this.$refs.designer.addComponent(cascader);
    this.$refs.designer.addComponent(select);
    this.$refs.designer.addComponent(input);
    this.$refs.designer.addComponent(radio);
    this.$refs.designer.addComponent(checkbox);
    //插入拖拽按钮到`main`分类下
    // this.$refs.designer.appendMenuItem('main', {
    //   icon: upload.icon,
    //   name: upload.name,
    //   label: upload.label
    // })
  },
  created() {
    if (this.$route.params.id) {
      this.data.id = this.$route.params.id;
      this.getSurveyInfo(this.data);
    }
  },
  methods: {
    getSurveyInfo(e) {
      surveryInfo(e.id).then((res) => {
        //FcDesigner 生成的`JSON`
        this.$refs.designer.setRule(res.data.rtformRules);
        //FcDesigner 生成的`options`
        this.$refs.designer.setOption(res.data.rtformOption);
      });
    },
    getRule() {
      this.$prompt("请输入问卷名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.data.surveyName = value;
          //FcDesigner 生成的`JSON`
          var formRule = [];
          var FcDesignerRule = this.$refs.designer.getRule();
          for (var i = 0; i < FcDesignerRule.length; i++) {
            //处理所有的fileId 字段为 title
            var rulei = FcDesignerRule[i];
            rulei.field = rulei.title;
            if (rulei.options) {
              if (rulei.options.length > 0)
                for (var j = 0; j < rulei.options.length; j++) {
                  rulei.options[j].value = rulei.options[j].label;
                }
            }
            formRule.push(JSON.stringify(rulei));
          }
          //FcDesigner 生成的`options`
          const FcDesignerOptions = this.$refs.designer.getOption();
          this.data.formRules = formRule;
          this.data.formOption = JSON.stringify(FcDesignerOptions);
          this.saveSurvery();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消保存",
          });
        });
    },
    saveSurvery() {
      saveSurvery(this.data).then((res) => {
        this.$message.success("保存表单成功!");
      });
    },
  },
};
</script>

<style scoped>
::v-deep ._fc-upload ._fc-upload-btn,
._fc-upload .fc-files {
  display: inline-block;
  width: 150px;
  height: 150px;
  text-align: center;
  line-height: 150px;
  border: 1px solid #c0ccda;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  margin-right: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>
